<template>
	<div class="article">
		<div class="head">
			<i>{{info.type}}</i> 更新了<br>{{info.lastDate}}
		</div>
		<div class="title">
			<b>{{info.title}}</b>
		</div>
		<div class="introduction">
			{{info.introduction}}
		</div>
		<div class="other">
			<span>{{info.like}} 人喜欢</span>
			<span class="text-right">{{info.read}} 人阅读</span>
		</div>
	</div>
</template>
<script>
	export default {
		props: ['info']
	}
</script>
<style scoped>
	.article {
		width:100%;
		/*margin-bottom: 40px;*/
		background-color: #FFF;
		padding: 10px 20px;
		border-bottom: 15px solid #ccc;
	}
	.introduction {
		margin-bottom: 20px;
	}
	.head {
		padding: 5px 0;
	}
	.title {
		text-align: center;
		font-size: 2rem;
		margin: 10px 0;
	}
	.other {
		display: flex;
		/*padding: 5px 0;*/
	}
	.other>span {
		flex: 1;
	}
	.text-right {
		text-align: right;
	}
</style>
